import React from 'react'
import StyleDiscrete from '../components/StyleDiscrete'
import StyleExact from '../components/StyleExact'
import StyleGray from '../components/StyleGray'
import StyleLinear from '../components/StyleLinear'
import StyleRGB from '../components/StyleRGB'
import StyleRGBA from '../components/StyleRGBA'


function DialogDataCellStyle(props) {
    const styleObj = JSON.parse(props.data.styleContent);
    return (
        <div style={{fontSize:'14px'}}>
            <div>
                <span style={{fontSize:'18px'}}>{props.data.description}</span>
                <span 
                style={{marginLeft:'10px',paddingLeft:'2px',paddingRight:'2px',color:'rgb(53,151,209)'}}>
                #{props.data.styleid}
                </span>
            </div>
            {
                (props.data!==null)? ( 
                    ( styleObj.type==='linear')?(
                        <StyleLinear styleObj={styleObj} />
                    ):""
                ):""
            }
            {
                (props.data!==null)? ( 
                    (styleObj.type==='discrete')?(
                        <StyleDiscrete styleObj={styleObj} />
                    ):""
                ):""
            }
            {
                (props.data!==null)? ( 
                    (styleObj.type==='exact')?(
                        <StyleExact styleObj={styleObj} />
                    ):""
                ):""
            }
            {
                (props.data!==null)? ( 
                    (styleObj.type==='gray')?(
                        <StyleGray styleObj={styleObj} />
                    ):""
                ):""
            }
            {
                (props.data!==null)? ( 
                    (styleObj.type==='rgb')?(
                        <StyleRGB styleObj={styleObj} />
                    ):""
                ):""
            }
            {
                (props.data!==null)? ( 
                    (styleObj.type==='rgba')?(
                        <StyleRGBA styleObj={styleObj} />
                    ):""
                ):""
            }
            
        </div>
    )
}

export default DialogDataCellStyle
